{include file="public/header" /}
{load href="__PUBLIC__/js/jquery.form.min.js" /}
<div id="dcWrap">
    <!--包含公共模版-->
    {include file="public/lefter" /}
    <div id="dcMain">
        <!-- 当前位置 -->
        <div id="urHere"><a href="{:url('index/index')}">管理中心</a><b>></b><strong>编辑图片</strong></div>
        <div class="mainBox" style="height:auto!important;min-height:550px;">
            <h3><a href="{:url('image/index')}" class="actionBtn">图片列表</a>编辑图片</h3>

            <form>
                <table width="100%" border="0" cellpadding="8" cellspacing="0" class="tableBasic">
                    <tr>
                        <td width="90" align="right">标题</td>
                        <td>
                            <input type="text" name="title" value="{$item.title}" size="80" class="inpMain" required/>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">图片分类</td>
                        <td>
                            <select name="cid">
                                <option value="">未分类</option>
                                {volist name="category" id="fcat"}
                                <option value="{$fcat.id}" {if condition="$fcat.id eq $item.cid" }selected{/if}> {$fcat.name}</option>
                                <!--二级分类-->
                                {if condition="isset($fcat.children)"}
                                {volist name="fcat['children']" id="scat"}
                                <option value="{$scat.id}" {if condition="$item.cid eq $scat['id']" }selected{/if}>&nbsp;&nbsp;├&nbsp;&nbsp;{$scat.name}</option>
                                <!--三级分类-->
                                {if condition="isset($scat.children)"}
                                {volist name="scat['children']" id="tcat"}
                                <option value="{$tcat.id}" {if condition="$item.cid eq $tcat['id']" }selected{/if}>&nbsp;&nbsp;&nbsp;&nbsp;├&nbsp;&nbsp;{$tcat.name}</option>
                                {/volist}
                                {/if}
                                {/volist}
                                {/if}
                                {/volist}
                            </select>
                        </td>
                    </tr>
                    {:token()}
                    <tr>
                        <td align="right">内容详情</td>
                        <td>
                            <table id="tableContent" class="tableBasic">
                                {foreach name=':json_decode($item["content"], true)' item='v' key='k'}
                                <tr id="itemImgContent{$k}">
                                    <td width="50%">
                                        <input class="inpMain" style="width: 90%" type="text" id="imgTitle{$k}" value="{$v.title}" onblur="updateContent({$k})">
                                    </td>
                                    <td width="30%">
                                        <img id="imgContentShow{$k}" width="70" height="70" src="{$v.url}">
                                        <input type="file" name="pic_url" onchange="uploadImg(this, {$k})">
                                    </td>
                                    <td width="20%">
                                        <span class="btn-danger" style="padding: 5px;border-radius: 3px;cursor: pointer" onclick="delCurrent({$k})">删除本行</span>
                                    </td>
                                </tr>
                                {/foreach}
                            </table>
                            <br>
                            <span class="btn-info" style="padding: 5px;border-radius: 3px;cursor: pointer" onclick="addImg()">新增一行</span>
                            <input id="content" type="hidden" name="content" value="{$item.content}"/>
                    </tr>
                    <tr>
                        <td width="80" height="35" align="right">发布时间</td>
                        <td>
                            <input type="text" name="publishtime" value="{$item.publishtime||date='Y-m-d H:i'}"
                                   size="19" class="inpMain date-picker"/>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="hidden" name="id" value="{$item.id}">
                            <span class="btn">提 交</span>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="clear"></div>
    {include file="public/footer" /}
    <div class="clear"></div>
</div>
<script type="text/javascript">

    $.datetimepicker.setLocale('ch');//设置中文
    $(".date-picker").datetimepicker({
        format: "Y-m-d H:i",      //格式化日期
        timepicker: false,    //关闭时间选项
    });

    var art_pro_url = "{:url('image/edit')}";
    var itemContentTag = $('#content');
    var itemContent = JSON.parse(itemContentTag.val());

    function uploadImg(img, k) {
        if ($(img).val() === "") return;
        $(img).wrap('<form id="picture_form" action="{:url("main/upload")}" method="post" enctype="multipart/form-data"></form>');
        $("#picture_form").ajaxSubmit({
            dataType: 'json',
            data: {
                act: 'add'
            },
            success: function (data) {
                if (data.status === 1) {
                    // 上传后把现有文件保存到content
                    $('#imgContentShow' + k).attr('src', data.path);
                    itemContent[k]['url'] = data.path;
                    itemContentTag.val(JSON.stringify(itemContent));
                    $("#picture_form").remove();
                    $("#imgContentShow" + k).after('<input type="file" name="pic_url" onchange="uploadImg(this, ' + k + ')">');
                } else {
                    $tip.html(data.msg);
                }
            },
            error: function (xhr) {
                layer.msg("上传失败" + xhr + ",请重新选择上传");
            }
        });
    }

    function updateContent(k) {
        itemContent[k]['title'] = $('#imgTitle' + k).val();
        itemContentTag.val(JSON.stringify(itemContent));
    }

    function delCurrent(k) {
        delete itemContent[k];
        itemContentTag.val(JSON.stringify(itemContent));
        $('#itemImgContent' + k).remove();
    }

    function addImg() {
        var k = itemContent.length;
        var tr = '<tr id="itemImgContent' + k + '"><td width="50%">' +
            '<input class="inpMain" style="width: 90%" type="text" id="imgTitle' + k + '" value="" onblur="updateContent(' + k + ')">' +
            '</td><td width="30%">' +
            '<img id="imgContentShow' + k + '" width="70" height="70" src="/static/admin/images/1.png">' +
            '<input type="file" name="pic_url" onchange="uploadImg(this, ' + k + ')">' +
            '</td><td width="20%">' +
            '<span class="btn-danger" style="padding: 5px;border-radius: 3px;cursor: pointer" onclick="delCurrent(' + k + ')">删除本行</span>' +
            '</td></tr>'
        $('#tableContent').append(tr);
        itemContent[k] = {title: '', url: ''};
    }

</script>
</body>
</html>
